<template>
  <div class="learnt-wrap">
    <van-nav-bar title="已修课程"
                 left-arrow
                 @click-left="onClickLeft" />
    <div class="recommand-cour">
      <course-item v-for="item in data.courseList"
                   :data="item"
                   :key="item"
                   class="recommand-cour-item"></course-item>
    </div>
  </div>
</template>

<script>
import CourseItem from '@/components/common/CourseItem.vue'
import { reactive, getCurrentInstance } from 'vue'
export default {
  setup () {
    const { ctx, proxy } = getCurrentInstance()
    const data = reactive({
      courseList: []
    })
    function onClickLeft () {
      window.history.length > 1 ? proxy.$router.go(-1) : proxy.$router.push('/user')
    }
    async function mygetCourseList () {
      const that = this.data
      proxy.$axios.course.getCourseList().then(res => {
        if (res.status === 200) {
          that.courseList = res.data.data.list
        }
      })
    }
    return {
      data,
      onClickLeft,
      mygetCourseList
    }
  },
  created () {
    this.mygetCourseList()
  },
  components: { CourseItem }
}
</script>
<style lang="scss" scoped>
.learnt-wrap {
  .recommand-cour {
    margin: $margin-horizon;
    padding-top: 5px;
    background-color: #fff;
    border-radius: $border-radius;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
  }
}
</style>
